$(() => {
  let cityNum;
  let $statusColor1=$("#statusColor div:first-child"),
    $statusColor2=$("#statusColor div:last-child"),
    $statusText=$("#statusText"),$statusTime=$("#statusTime"),
    $controlPic=$("#controlPic img")
  ;
  $.get('../lib/map/china.json', function (chinaJson) {
    let mapChart = echarts.init(document.getElementById('map'));
    echarts.registerMap('china', chinaJson); // 注册地图

    // 地图位置点击事件
    mapChart.on('click', function (p) {
      if (p.componentSubType === 'scatter') {
        cityNum = p.dataIndex;
        let provinceName = ["长春", "大连", "石家庄", "包头", "青海湖", "南通", "广州", "南宁", "呼伦贝尔", "敦煌"];
        getWeather(provinceName[cityNum], 'weather_cc', 'pic_cc', 1);
        document.getElementById("siteName").innerText = provinceName[cityNum] + "站";
        document.getElementById("J").value = myData[cityNum].value[0];
        document.getElementById("W").value = myData[cityNum].value[1];
        switch (cityNum) {
          case 0:
            $statusColor1.css("background","#473bba");
            $statusText.text("正常");
            $statusText.css("border-color","#0088ff");
            $statusTime.text("3");
            $controlPic.attr("src","../control/images/lidarPic.jpg");
            return
          case 1:
            $statusColor1.css("background","#473bba");
            $statusText.text("正常");
            $statusText.css("border-coloe","#0088ff");
            $statusTime.text("6");
            $controlPic.attr("src","../control/images/1.jpg");
            return
          case 2:
            $statusColor1.css("background","#473bba");
            $statusText.text("正常");
            $statusText.css("border-color","#0088ff");
            $statusTime.text("2");
            $controlPic.attr("src","../control/images/2.jpg");
            return
          case 3:
            $statusColor1.css("background","#473bba");
            $statusText.text("正常");
            $statusText.css("border-color","#0088ff");
            $statusTime.text("4");
            $controlPic.attr("src","../control/images/3.jpg");
            return
          case 4:
            $statusColor1.css("background","#473bba");
            $statusText.text("正常");
            $statusText.css("border-color","#0088ff");
            $statusTime.text("6");
            $controlPic.attr("src","../control/images/4.jpg");
            return
          case 5:
            $statusColor1.css("background","#eae839");
            $statusText.text("维修");
            $statusText.css("border-color","#eae839");
            $statusTime.text("0");
            $controlPic.attr("src","../control/images/5.jpg");
            return
          case 6:
            $statusColor1.css("background","#473bba");
            $statusText.text("正常");
            $statusText.css("border-color","#0088ff");
            $statusTime.text("12");
            $controlPic.attr("src","../control/images/6.jpg");
            return
          case 7:
            $statusColor1.css("background","#473bba");
            $statusText.text("正常");
            $statusText.css("border-color","#0088ff");
            $statusTime.text("10");
            $controlPic.attr("src","../control/images/7.jpg");
            return
          case 8:
            $statusColor1.css("background","#eae839");
            $statusText.text("维修");
            $statusText.css("border-color","#eae839");
            $statusTime.text("0");
            $controlPic.attr("src","../control/images/8.jpg");
            return
          case 9:
            $statusColor1.css("background","#FC3D53");
            $statusText.text("故障");
            $statusText.css("border-color","#FC3D53");
            $statusTime.text("0");
            $controlPic.attr("src","../control/images/9.jpg");
            return
        }
        // location.replace('index3.html?cityNum=' + cityNum);
        //alert(cityNum);
      }
    });

    let myData = [
      {name: '长春', value: [125.35, 43.88, 200],itemStyle:{color:'#473bba'}},
      {name: '大连', value: [121.62, 38.92, 200],itemStyle:{color:'#473bba'}},
      {name: '石家庄', value: [114.48, 38.03, 200],itemStyle:{color:'#473bba'}},
      {name: '包头', value: [109.84, 40.657, 200],itemStyle:{color:'#473bba'}},
      {name: '青海湖', value: [100.2, 36.9, 200],itemStyle:{color:'#473bba'}},
      {name: '南通', value: [120.88, 31.98, 200],itemStyle:{color:'#eae839'}},
      {name: '广州', value: [113.23, 23.16, 200],itemStyle:{color:'#473bba'}},
      {name: '南宁', value: [108.33, 22.84, 200],itemStyle:{color:'#473bba'}},
      {name: '呼伦贝尔', value: [119.76, 49.22, 200],itemStyle:{color:'#eae839'}},
      {name: '敦煌', value: [94.71, 40.13, 200],itemStyle:{color:'#FC3D53'}}
    ];

    let option = {

      geo: {
        map: 'china',
        roam: true,
        itemStyle: {					// 定义样式
          normal: {					// 普通状态下的样式
            areaColor: 'rgb(27,209,252)',
            borderColor: 'rgba(255,255,255,0)',
            show: true

          },
          emphasis: {					// 高亮状态下的样式
            areaColor: 'rgb(27,209,252)',
            show: true
          }
        },
        label: {

          normal: {
            show: true,                          //是否在普通状态下显示标签。
            color: 'rgb(252,61,83)'
          },
          emphasis: {
            show: true,                         //是否在高亮状态下显示标签。
            color: 'rgb(252,61,83)'
          }
        }
      },

      series: [
        {
          name: '卫星',            // series名称
          type: 'scatter',          // series图表类型
          coordinateSystem: 'geo',  // series坐标系类型
          data: myData, // series数据内容
          selectedMode: "single",
          //控制显示文本
          label: {
            normal: {
              fontSize: 13,
              fontWeight: 900,
              formatter: '{b}',
              show: true
            },
            emphasis: {
              show: true
            }
          },

          inRange: {
            color: ['#473bba', '#eae839', '#d94e5d']
          },
          symbolSize: function (val) {//根据数值大小控制点的大小
            return val[2] / 5;
          }
        }],
      tooltip: {
        showDelay: 0,
        data: myData,

        formatter: function (params) {
          if (params.dataIndex === 0) {
            return '长春 ' + weatherData[0];
          }
          if (params.dataIndex === 1) {
            return '大连 ' + weatherData[1];
          }
          if (params.dataIndex === 2) {
            return '石家庄 ' + weatherData[2];
          }
          if (params.dataIndex === 3) {
            return '包头 ' + weatherData[3];
          }
          if (params.dataIndex === 4) {
            return '青海湖 ' + weatherData[4];
          }
          if (params.dataIndex === 5) {
            return '南通 ' + weatherData[5];
          }
          if (params.dataIndex === 6) {
            return '广州 ' + weatherData[6];
          }
          if (params.dataIndex === 7) {
            return '南宁 ' + weatherData[7];
          }
          if (params.dataIndex === 8) {
            return '呼伦贝尔 ' + weatherData[8];
          }
          if (params.dataIndex === 9) {
            return '敦煌 ' + weatherData[9];
          }

        },

        axisPointer: {
          show: true,
          type: 'cross',
          lineStyle: {
            type: 'dashed',
            width: 1
          }
        }
      }

    };
    mapChart.setOption(option);
  });
});
